<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <div id="app">
        <h3 v-for='(book, index) in books'>{{book}} ===== {{index}}</h3>

        <table>
            <tr>
                <th v-for='(value, key) in people'>{{key}}===={{value}}</th>
            </tr>

        </table>

        <div v-for="good in goods">
            <h3>{{good.category}}</h3>
            <p v-for="kind in good.kinds">{{kind}}</p>
        </div>
    </div>

    <script src="../lib/Vue/vue.js"></script>
    <script>

        var vm=new Vue({
            el:"#app",
            data:{
                books:['西游记','红楼梦','三国演义','水浒传'],
                people:{
                    name:'张三',
                    age:12,
                    address:'中山西路666'
                    
                },
                goods:[
                    {
                    category:'鞋子',
                    kinds:['皮鞋','运动鞋','跑步鞋','平底鞋','高跟鞋']
                    },
                    {
                    category:'上衣',
                    kinds:['T恤','衬衣','马甲','毛衣','外套']
                    },
                    {
                    category:'裤子',
                    kinds:['牛仔裤','短裤','西装裤','休闲裤','运动裤']
                    },
                    
                ]
            }
        })
    </script>
</body>
</html>